<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组合选择器</title>

</head>
<body>
    <h1>组合选择器</h1>
    <p>使用组合选择器 获得不同的选择器</p>
    <ol>
        <li>后代选择器 使用空格分割</li>
        <li>子元素选择器 使用>分割</li>
        <li>相邻选择器 使用+分割</li>
        <li>普通兄弟选择器 使用~分割</li>
    </ol>
    <hr>
    <h2>后代选择器 使用空格分割</h2>
    <style>
        #d0 p{background-color: palevioletred;}
    </style>
    <div id="d0">
        <p>
div内的p
        </p>
    </div>
    <p>div外的p</p>
    <h2>子元素选择器 使用>分割</h2>
    <style>
        #d1>p{
            color: red;
        }
        #d2 p{
            color: blue;
        }
    </style>
    <div id="d1">
        <p>d1内的第一个p</p>
         <p>d1内的第二个p</p>
    </div>
    <div id="d2">
        <div>
            <p>d2的div内的p</p>
        </div>
    </div>
    <hr>
    <h2>相邻选择器 使用+分割</h2>
    <style>
        #i3 + li{
            color: blueviolet;
        }
    </style>
    <ul>
        <li>one</li>
        <li>two</li>
        <li id="i3">three</li>
        <li>four</li>
        <li>five</li>
    </ul>
    <h2>普通兄弟选择器 使用~分割</h2>
    <style>
        #i2 ~li{
            color: blueviolet;
        }
    </style>
    <ol>
        <li>苹果</li>
          <li id="i2">香蕉</li>
            <li>梨</li>
            <li>西瓜</li>
    </ol>
</body>
</html>